<template>
	<view class="info_bg">
		<image class="bgimg" :src="activeMsg.avatar" mode="aspectFill"></image>
		<image @click="$helper.back(1)" class="back-img" src="/static/image/back.png" mode=""></image>
		<image class="more-img" src="/static/image/more.png" mode="" @click="handleMore"></image>
		
		<!-- 底部更多操作 拉黑删除 -->
		<uni-popup class="select_popup" ref="popupMore" :mask-click="true" type="bottom">
			<view class="morePopup">
			   <view class="selectDel">拉黑</view>		
				 <!-- <view class="selectDel">删除</view>	 -->
				 <view class="selectclose" @click="closeMore">取消</view>	
			</view>
		</uni-popup>
		<!-- 查看微信账号说明 -->
		<uni-popup class="select_popup" ref="popupWxbook" :mask-click="true" type="center">
			<view class="wxbookPopup">
					<view class="seeWX">查看微信账号</view>
					<view class="booktxt">为保护隐私，对方已启用专属权限，您需消耗金币才能查看对方的微信账号。</view>
					<view class="xymsg">
							1.解锁后可获得对应联系方式，加好友时请
							输入备注验证。（如团伴空间小青梅）
							<br> 2.解锁后72小时内未成功添加好友，请联系
							客服。<br>
							3.添加联系方式后，不可通过其进行违法行
							为活动（包括不限于购买色情内容），请勿
							向达人直接转账，注意人数及财产安全，若
							通过第三方平台联系给您带来的任何损失，
							本平台概不负责！
					</view>
					<view class="book_btn">
							<view class="bookclose" @click="closeWxBook">取消</view>
							<view class="booksubBuy" @click="handleSeeWx">799<image src="/static/image/Index/index-jifen.png" mode="" ></image>解锁</view>
					</view>
			</view>
		</uni-popup>
		<!-- 微信账号弹框 -->
		<uni-popup class="select_popup" ref="popupWxNum" :mask-click="true" type="center">
			<view class="wxNumPopup">
					<view class="seeWX">微信账号</view>
					<view class="wxNumtxt">
						<image src="/static/image/Index/index-wx.png" mode=""></image>
						{{activeMsg.wechat}}
					</view>
					<view class="book_btn">
							<view class="bookclose" @click="closeWxNum">取消</view>
							<view class="booksubBuy" @click="copyWx">复制</view>
					</view>
			</view>
		</uni-popup>
		
		<!-- 充值弹框 -->
		<uni-popup class="select_popup" ref="popupChongWxNum" :mask-click="true" type="center">
			<view class="wxNumVipPopup">
					<view class="seeWX">余额不足</view>
					<view class="wxVipNumtxt">
					您的余额不足，无法查看微信账号，请充值。
					</view>
					<view class="book_btn">
							<view class="bookclose" @click="closeChongWxNum">取消</view>
							<view class="booksubBuy" @click="rechargePoint">充值</view>
					</view>
			</view>
		</uni-popup>
		
		<!-- vip查看微信号弹框 -->
		<uni-popup class="select_popup" ref="popupVipWxNum" :mask-click="true" type="center">
			<view class="wxNumVipPopup">
					<view class="seeWX">提示</view>
					<view class="wxVipNumtxt">
						尊敬的VIP用户，是否确认免费解锁 <span>(今
						日剩余免费解锁次数:{{vipNums}}次)</span>此微信账号？
					</view>
					<view class="book_btn">
							<view class="bookclose" @click="closeVipWxNum">取消</view>
							<view class="booksubBuy" @click="unlockWechat">确认</view>
					</view>
			</view>
		</uni-popup>
		
		
		
		<!-- 打赏弹窗 -->
		<daShangComp ref="dashangPop" :articleId="articleId" :typeList="typeList"></daShangComp>
		
		<view class="info-content">
			<view class="info-msg">
				<view class="activing">
					<image :src="activeMsg.avatar" mode="" class="active_img"></image>
					<image src="/static/image/Index/index-zaixian.png" mode="" class="activezx"></image>
				</view>
				<view class="info-list">
					<view style="display: flex;align-items: center;">
						<view class="info-name">{{activeMsg.user_nickname}}</view>
						<image src="/static/image/Index/girl-icon.png" mode="" v-if="activeMsg.gender==2"  class="info-sex"></image>
						<image src="/static/image/Index/boy-icon.png" mode="" v-else  class="info-sexboy"></image>
						<image src="/static/image/Index/VIP-icon.png" mode="" v-if="activeMsg.vip==true" @click="openVip" class="info-vip"></image>
					</view>
					<view class="info-st">身高{{activeMsg.stature}}cm | 体重{{activeMsg.weight}}kg</view>
					<view class="info-copy"> 团伴ID: {{activeMsg.id}} <image src="/static/image/Index/index-copy.png" mode="" @click="copyAppId(activeMsg.id)"></image>
					</view>
				</view>
				<view class="info-guan" @click="handleFollow" v-if="activeMsg.attention==false">关注</view>
				<view class="info-guaned" @click="handleDelFollow" v-else>已关注</view>
			</view>
			<view class="info-wchart">
				<view class="wchart-text">
					<image src="/static/image/Index/index-deng.png" mode="" style="width: 22rpx;height:26rpx;"></image>
					颜值创作者
				</view>
				<view class="wchart-text" >
					<image src="/static/image/Index/index-wx.png" mode="" style="width: 32rpx;height:25rpx"></image>
					 <span v-if="activeMsg.wechat!=''" @click="handleWxBook">{{activeMsg.wechat}}</span>
					 <span v-else>暂无微信号</span>			 
				</view>
				<view class="wchart-text" v-if="showTell">
					<image src="/static/image/Index/index-tel.png" mode="" style="width: 26rpx;height:24rpx"></image>
					语音呼叫
				</view>
			</view>
			<view class="info-tabs">
				<view class='activeinfo' v-for="(item,index) in tabList" :key="index">
					<view :class="{texted:currentTab == index }" :data-tab="item.value" @click="switchTab(index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="tab-info-content">
				<view v-if="currentTab==0">
					<!-- 相册 -->
					<view class="infocontent_List">
						<view class="commFilter" @click="handlePhotoAlbum">
							<view class="filterTxt">相册 ({{photoList.length}})</view>
							<image src="/static/image/Index/index-filter-left.png" class="leftFilter" mode=""></image>
						</view>
						<view class="info-photolist">
							<view class="photo-heng">
								<image v-for="(item,index) in photoList.slice(0,2)" :key="index" :src="item" mode="aspectFill"></image>
							</view>
							<view class="phont-shu" v-if="photoList.length>2">
								<image v-for="(item,index) in photoList.slice(2,4)" :key="index" :src="item" mode="aspectFill"
									class="shuimg"></image>
								<view v-if="photoList.length>4" class="shu-zhe">+{{photoList.length - 4}}</view>
							</view>
						</view>
					</view>
					<!-- 隔断 -->
					<view class="info-bd"></view>
					<!-- 视频 -->
					<view class="infocontent_List">
						<view class="commFilter" @click="handleVideoAlbum">
							<view class="filterTxt">视频 ({{videoList.length}})</view>
							<image src="/static/image/Index/index-filter-left.png" class="leftFilter" mode=""></image>
						</view>
						<view class="info-photolist" v-if="videoList.length>0">
							<view class="video-infosmall">
								<image src="/static/image/Index/1.png" mode="aspectFill" class="vid-aimg"></image>
								<view class="vid-zhe"></view>
								<image src="/static/image/find/play.png" mode="" class="vid-play"></image>
							</view>
							<view class="video-infobig">
								<image src="/static/image/Index/1.png" mode="aspectFill" class="vid-aimgbig"></image>
								<view class="vid-zhebig"></view>
								<image src="/static/image/find/play.png" mode="" class="vid-playbig"></image>
							</view>
						</view>
					</view>
					<!-- 隔断 -->
					<view class="info-bd"></view>
					<!-- 空间	 -->
					<view class="infocontent_List">
						<view class="commFilter">
							<view class="filterTxt">空间 </view>
						</view>
						<view class="info-space"  @click="joinSpace">
							<image :src="activeMsg.avatar" mode="aspectFill" class="space-ava"></image>
							<view class="space-name">
								<view class="spacename-name">{{activeMsg.user_nickname}}</view>
								<view class="spacename-tai">动态: {{dongList.length}}</view>
							</view>
							<view class="space-join">立即加入</view>
						</view>
					</view>

					<!-- 隔断 -->
					<view class="info-bd"></view>
					<!-- 我的标签	 -->
					<view class="infocontent_List">
						<view class="commFilter">
							<view class="filterTxt">我的标签 </view>
						</view>
						<view class="info-label">
							<view v-for="(item,index) in activeMsg.label" :key="index" class="infolabel-name">{{item}}</view>
						</view>
					</view>
					<!-- 隔断 -->
					<view class="info-bd"></view>
					<!-- 关于我	 -->
					<view class="infocontent_List">
						<view class="commFilter">
							<view class="filterTxt">关于我 </view>
						</view>
						<view class="info-aboutme">
							<view class="aboutme-txt">{{activeMsg.signature}} </view>
						<!-- 	<view class="aboutme-txt">长期更新高质量作品哦，绝对真实本人露脸私拍图片+视频！</view>
							<view class="aboutme-txt">更多精彩都在空间里，快快关注我吧~</view> -->
						</view>
					</view>
					<!-- 隔断 -->
					<view class="info-bd"></view>
					<!-- 去过的地方	 -->
					<view class="infocontent_List">
						<view class="commFilter">
							<view class="filterTxt">去过的地方</view>
						</view>
						<view class="info-label">
							<view v-for="(item,index) in activeMsg.town" :key="index" class="infolabel-name">{{item}}</view>
						</view>
					</view>
					<!-- 隔断 -->
					<view class="info-bd"></view>
					<!-- 星座	 -->
					<view class="infocontent_List">
						<view class="commFilter">
							<view class="filterTxt">星座</view>
						</view>
						<view class="info-xing">
							<image v-if="activeMsg.horoscope=='水瓶座'" src="/static/image/Index/index-shuiping.png" mode="" class="xingimg"></image>
							<image v-if="activeMsg.horoscope=='双鱼座'" src="/static/image/Index/index-shuangyu.png" mode="" class="xingimg"></image>
							<image v-if="activeMsg.horoscope=='双子座'" src="/static/image/Index/index-shuangzi.png" mode="" class="xingimg"></image>
							<image v-if="activeMsg.horoscope=='巨蟹座'" src="/static/image/Index/index-juxie.png.png" mode="" class="xingimg"></image>
							<image v-if="activeMsg.horoscope=='狮子座'" src="/static/image/Index/index-shizi.png" mode="" class="xingimg"></image>
							<image v-if="activeMsg.horoscope=='处女座'" src="/static/image/Index/index-chunv.png" mode="" class="xingimg"></image>
							<image v-if="activeMsg.horoscope=='天秤座'" src="/static/image/Index/index-tiancheng.png" mode="" class="xingimg"></image>
							<image v-if="activeMsg.horoscope=='天蝎座'" src="/static/image/Index/index-tianxie.png" mode="" class="xingimg"></image>
							<image v-if="activeMsg.horoscope=='射手座'" src="/static/image/Index/index-sheshou.png" mode="" class="xingimg"></image>
							<image v-if="activeMsg.horoscope=='摩羯座'" src="/static/image/Index/index-mojie.png" mode="" class="xingimg"></image>

						</view>
					</view>
					<!-- 隔断 -->
					<view class="info-bd"></view>
					<!-- 三围	 -->
					<view class="infocontent_List">
						<view class="commFilter">
							<view class="filterTxt">三围</view>
						</view>
						<view class="info-wei">
							{{activeMsg.sw}}
						</view>
					</view>

					<!-- 按钮 -->
					<view class="info-btn">
						<view class="join-btn" @click="joinSpace">加入空间</view>
						<view class="luwi-btn" @click="dsGift">
							<image src="/static/image/Index/index-liwu.png" mode=""></image> 送礼物
						</view>
					</view>


				</view>
				<view v-if="currentTab==1" class="infodong_list">
					<view class="info_model" @click="handleFindDetail" v-for="(item,index) in dongList" :key="index">
						<image src="/static/image/Index/1.png" mode="" class="model_img"></image>
						<image src="/static/image/Index/index-play.png" mode="" class="playimg"></image>
						<view class="dongname">空间更好看</view>
						<view class="dongtime">3天前</view>
						<view class="dongzannum">
							<image v-if="showZan" src="/static/image/Index/index-zan.png" mode=""></image>
							<image v-else src="/static/image/Index/index-zaned.png" mode=""></image>
							<span>4568</span>
						</view>
					</view>

					<view class="normaltxt" v-if="dongList.length==0"> 暂无数据~ </view>

					<!-- 按钮 -->
					<view class="info-btn" v-if="dongList.length>0">
						<view class="join-btn" @click="joinSpace">加入空间</view>
						<view class="luwi-btn"  @click="dsGift">
							<image src="/static/image/Index/index-liwu.png" mode=""></image> 送礼物
						</view>
					</view>
				</view>
			</view>
		</view>
	
	</view>

</template>

<script>
	import uniPopup from "@/components/uniapp-components/uni-popup/uni-popup.vue"
	// 打赏弹窗
	import daShangComp from '@/components/nvue-comp/dashang.nvue';
	export default {
		components: {
			uniPopup,
			daShangComp
		},
		data() {
			return {
				currentTab: 0,
				tabList: [{
						name: '资料',
						value: 0
					},
					{
						name: '动态',
						value: 1
					},
				],
				isGuan: true,
				showZan: true,
				//语音显示
				showTell:false,
				//vip解锁次数
				vipNums:2,
				photoList: [],
				videoList:[],
				tbAppId:'123456789',
				labelList: ['极致反差', '甜妹', '御萝双修', '舞蹈'],
				spaceList: ['乌鲁木齐', '北京', '山东青岛', '四川成都', '天津', '沈阳'],
				typeList: [{
						title: '打call',
						jf: '100',
						img: '/static/image/find/gift-1.png'
					},
					{
						title: '糖果',
						jf: '300',
						img: '/static/image/find/gift-2.png'
					},
					{
						title: '比心',
						jf: '500',
						img: '/static/image/find/gift-3.png'
					},
					{
						title: '玫瑰',
						jf: '800',
						img: '/static/image/find/gift-4.png'
					},
					{
						title: '盲盒',
						jf: '1000',
						img: '/static/image/find/gift-5.png'
					},
					{
						title: '么么哒',
						jf: '1500',
						img: '/static/image/find/gift-6.png'
					},
					{
						title: '幸运之鹿',
						jf: '2000',
						img: '/static/image/find/gift-7.png'
					},
					{
						title: '告白气球',
						jf: '3000',
						img: '/static/image/find/gift-8.png'
					},
				], //打赏礼物列表
				articleId: '11', // 被打赏人id
				userId:'',
				activeMsg : {},
				dongList:[],
				pointInfo:null,
				isVip:'',
				userInfo:''
			}
		},
		onLoad(options) {
			uni.getStorage({
				key:'userInfo',
				success:(res)=> {
					this.userInfo = res.data
				}
			})

			this.userId = options.id
			this.$http.getActiceMsg({id:this.userId}).then(res => {
				if (res.code == '1') {
					this.activeMsg = res.data;
					if(this.activeMsg.town){
						this.activeMsg.town = this.activeMsg.town.split(',')
					}
					if(this.activeMsg.label){
						this.activeMsg.label = this.activeMsg.label.split(',')
					}
					//没有解锁微信
					if(this.activeMsg.is_unlock_wechat==false){
							this.activeMsg.wechat = '********'
					}else{
						this.activeMsg.wechat = res.data.wechat
					}
				}		
			})
		 this.$http.getActiceImgorVideo({id:this.userId,type:'image'}).then(res => {
				if (res.code == '1') {
					this.photoList = res.data;
					
				}		
			})
			this.$http.getActiceImgorVideo({id:this.userId,type:'video'}).then(res => {
				if (res.code == '1') {
					this.videoList= res.data;
					
				}		
			})
			this.$http.getActiceDong({user_id:this.userId,dynamic_type:''}).then(res => {
				if (res.code == '1') {
					this.dongList= res.data.data;			
				}		
			})
			//获取积分
			this.getPoint()
		},
		methods: {
			getMsg(){
				this.$http.getActiceMsg({id:this.userId}).then(res => {
					if (res.code == '1') {
						this.activeMsg = res.data;
						if(this.activeMsg.town){
							this.activeMsg.town = this.activeMsg.town.split(',')
						}
						if(this.activeMsg.label){
							this.activeMsg.label = this.activeMsg.label.split(',')
						}
						//没有解锁微信
						if(this.activeMsg.is_unlock_wechat==false){
								this.activeMsg.wechat = '********'
						}
					}		
				})
			},	
			//获取积分
			getPoint(){
				this.$http.getPointDetail({}).then(res => {
					if (res.code == '1') {
						this.pointInfo= res.data
						
					}		
				})
			},
			switchTab(index) {
				this.currentTab = index;
				if(index=='1'){
					this.$http.getActiceDong({user_id:this.userId,dynamic_type:''}).then(res => {
						if (res.code == '1') {
							this.dongList= res.data.data;			
						}		
					})
				}
			},
			// 打赏按钮
			dsGift() {
				this.$refs.dashangPop.open();
			},
			handleMore(){
				this.$refs.popupMore.open()
			},
			closeMore(){
				this.$refs.popupMore.close()
			},
			handleWxBook(){
				if(this.userInfo.vip==true){
					this.$refs.popupVipWxNum.open()

				}else if(this.activeMsg.is_unlock_wechat==false){
					this.$refs.popupWxbook.open()
				}else{
					this.$refs.popupWxNum.open()
				}					
			},
			//vip解锁微信
			unlockWechat(){		
				this.$http.getUnlock({action:'wechat',id:this.userId}).then(res => {
					if (res.code == '1') {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '解锁成功'
							})	
						this.$refs.popupVipWxNum.close() //关闭提示弹框
						this.$refs.popupWxNum.open()   //打开微信号弹框
					}else{
						this.$refs.popupVipWxNum.close()
						uni.showToast({
							icon: 'none',
							mask: true,
							title:'该用户未设置微信'
						})	
					} 		
				})
			},
			closeWxBook(){
				this.$refs.popupWxbook.close()
			},
			handleSeeWx(){
			
				if(this.pointInfo.total_score<799){
						this.$refs.popupWxbook.close()
						// this.$refs.popupWxNum.open()
						// this.$refs.popupVipWxNum.open()
						this.$refs.popupChongWxNum.open()
				}else{
					uni.showModal({
						title: '提示',
						content: '是否确认花费799积分？',
						confirmColor: "#000000",
						cancelColor: "#999999",
						success: (res) => {
							if (res.confirm) {
								this.$refs.popupWxNum.open()
							}
						}
					})
				}

			},
			
			closeWxNum(){
				this.$refs.popupWxNum.close()
			},
			//复制弹框 复制微信按钮
			copyWx(){
				uni.setClipboardData({
					data:String(this.activeMsg.wechat), //复制内容只支持字符串类型
				  success: function () {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '复制成功'
					})
					},
				
				})
			},
			closeChongWxNum(){
				this.$refs.popupChongWxNum.close()
			},
			rechargePoint(){
		    	this.$refs.popupChongWxNum.close()
					this.$helper.to('/pages/tabBar/index/rechargePoint')
					
			},
			closeVipWxNum(){
					this.$refs.popupVipWxNum.close()
			},
			//关注
			handleFollow(){
		  	this.$http.follow({id: Number(this.userId)}).then(res => {
				if (res.code == '1') {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '已关注'
					})	
				this.getMsg()
				}		
			})			
			},
			//取消关注
			handleDelFollow(){
				uni.showModal({
					title: '提示',
					content: '是否取消关注？',
					confirmColor: "#000000",
					cancelColor: "#999999",
					success: (res) => {
						if (res.confirm) {
							this.$http.follow({id: Number(this.userId)}).then(res => {
								if (res.code == '1') {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '已取消'
									})	
									this.getMsg()
								}		
							})
						}
					}
				})			
			},
			//相册跳转
			handlePhotoAlbum(){
				this.$helper.to('/pages/tabBar/index/photoAlbum')
			},
			//视频跳转
			handleVideoAlbum(){
				this.$helper.to('/pages/tabBar/index/videoAlbum')
			},
			//点击按钮复制
			copyAppId(value){
				uni.setClipboardData({
					data:String(value), //复制内容只支持字符串类型
			    success: function () {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '复制成功'
					})
					},

				})
			},
			//vip
			openVip(){
				this.$helper.to('/pages/views/openVip/openVip')
			},
			//动态跳转
			handleFindDetail(){
				this.$helper.to('/pages/views/findDetail/findDetail')
			},
			//假如空间
			joinSpace(){
				this.$helper.to('/pages/tabBar/index/spaceInfo??userid=' + this.userId)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.select_popup {
		z-index: 9999;
		width: 100%;
		// 更多弹框
		.morePopup {
			background-color: #fff;
			height: 298rpx;
			border-radius:30rpx 30rpx 0 0 ;
		 .selectBlack{
				margin:0 30rpx;
				font-size: 30rpx;
				border-bottom:1px solid #f8f8f8;
				height:118rpx;
				text-align: center;
				line-height: 118rpx;
				color:#000;
	  	}
			.selectDel{
				font-size: 30rpx;
				height:118rpx;
				text-align: center;
				line-height: 118rpx;
				color:#FF0000;
			}
			.selectclose{
				font-size: 30rpx;
				border-top:20px solid #f8f8f8;
				height:118rpx;
				text-align: center;
				line-height: 118rpx;
				color:#999;
			}
		}
		// 查看微信协议
		.wxbookPopup{
			background-color: #fff;
			width:600rpx;
			height: 753rpx;
			border-radius:30rpx;
			.seeWX{
				font-size: 32rpx;
				color:#000;
				text-align: center;
				padding-top:40rpx;
			}
			.booktxt{
				font-size: 28rpx;
				color:#666;
				width:504rpx;
				line-height: 38rpx;
				text-align: center;
				margin:0 auto;
				margin-top:48rpx;
			}
			.xymsg{
				width:504rpx;
				height:372rpx;
				line-height: 36rpx;
				background: #f8f8f8;
				margin:40rpx auto;
				border-radius: 16rpx;
				font-size: 24rpx;
				color:#999;
				padding:30rpx 24rpx;
			}
			.book_btn{
				display: flex;
				align-items: center;
				height:96rpx;
				border-top:1px solid #f8f8f8;
				border-bottom-left-radius: 30rpx;
				.bookclose{
					width:300rpx;
					height: 96rpx;
					line-height: 96rpx;
					font-size: 32rpx;
					color:#999;
					text-align: center;
					border-right:1px solid #f8f8f8;
				}
				.booksubBuy{
					display: flex;
					align-items: center;
					justify-content: center;
					width:299rpx;
					height: 96rpx;
					color:#000;
					line-height: 96rpx;
					text-align: center;
					font-size: 32rpx;
					image{
						width:28rpx;
						height:28rpx;
					}
				}
			}
		}
		// 查看微信号
		.wxNumPopup{
			background-color: #fff;
			width:600rpx;
			height: 301rpx;
			border-radius:30rpx;
			.seeWX{
				font-size: 32rpx;
				color:#000;
				text-align: center;
				padding-top:40rpx;
			}
			.wxNumtxt{
				height:122rpx;
				display: flex;
				font-size: 28rpx;
				color:#666;
				justify-content: center;
				line-height: 122rpx;
				image{
					width:30rpx;
					height:25rpx;
					margin-top:52rpx;
					margin-right:12rpx;
				}
			}
			
			.book_btn{
				display: flex;
				align-items: center;
				height:96rpx;
				border-top:1px solid #f8f8f8;
				.bookclose{
					width:300rpx;
					height: 96rpx;
					line-height: 96rpx;
					font-size: 32rpx;
					color:#999;
					text-align: center;
					border-right:1px solid #f8f8f8;
				}
				.booksubBuy{
					display: flex;
					align-items: center;
					justify-content: center;
					width:299rpx;
					height: 96rpx;
					color:#000;
					line-height: 96rpx;
					text-align: center;
					font-size: 32rpx;
					image{
						width:28rpx;
						height:28rpx;
					}
				}
			}
		}
		
		// vip查看微信号
		.wxNumVipPopup{
			background-color: #fff;
			width:600rpx;
			height: 352rpx;
			border-radius:30rpx;
			.seeWX{
				font-size: 32rpx;
				color:#000;
				text-align: center;
				padding-top:40rpx;
			}
			.wxVipNumtxt{
				width:482rpx;
				height:124rpx;
				font-size: 28rpx;
				color:#666;
				margin:0 auto;
				margin-top:48rpx;
				span{
					color:#ff0000;
				}
			}
			
			.book_btn{
				display: flex;
				align-items: center;
				height:96rpx;
				border-top:1px solid #f8f8f8;
				.bookclose{
					width:300rpx;
					height: 96rpx;
					line-height: 96rpx;
					font-size: 32rpx;
					color:#999;
					text-align: center;
					border-right:1px solid #f8f8f8;
				}
				.booksubBuy{
					display: flex;
					align-items: center;
					justify-content: center;
					width:299rpx;
					height: 96rpx;
					color:#000;
					line-height: 96rpx;
					text-align: center;
					font-size: 32rpx;
					image{
						width:28rpx;
						height:28rpx;
					}
				}
			}
		}
		
		
		
	}
	.info_bg {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}
	.bgimg{
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		filter: blur(6rpx);
		/* 调整模糊程度 */
		z-index: -1;
	}


	.back-img {
		width: 18rpx;
		height: 32rpx;
		position: absolute;
		top: 50rpx;
		left: 30rpx;
		z-index: 9999;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.more-img {
		width: 46rpx;
		height: 10rpx;
		position: absolute;
		top: 64rpx;
		right: 30rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.info-content {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 80%;
		background: #fff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		overflow-y: auto;

		.info-msg {
			display: flex;
			margin: 40rpx 30rpx;
		}

		.activing {
			position: relative;
			display: inline-block;
			margin-right: 24rpx;
			width: 160rpx;
			height: 160rpx;
		}

		.active_img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}

		.activezx {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			position: absolute;
			bottom: 0;
			right: 0;
		}

		.info-list {
			margin-right: 72rpx;
		}

		.info-name {
			width: 200rpx;
			font-size: 40rpx;
			color: #000;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: bold;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.info-sex {
			width: 16rpx;
			height: 24rpx;
			margin: 0 18rpx;
		}
		.info-sexboy{
			width: 22rpx;
			height: 22rpx;
			margin: 0 18rpx;
		}

		.info-vip {
			width: 54rpx;
			height: 28rpx;
		}

		.info-st {
			font-size: 24rpx;
			margin-top: 30rpx;
			color: #999;
		}

		.info-copy {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #999;
			margin-top: 24rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 14rpx;
			}
		}

		.info-guan {
			background: #000;
			border-radius: 8rpx;
			font-size: 24rpx;
			width: 128rpx;
			height: 50rpx;
			color: #fff;
			line-height: 50rpx;
			text-align: center;
		}

		.info-guaned {
			background: #fff;
			border-radius: 8rpx;
			font-size: 24rpx;
			width: 128rpx;
			height: 50rpx;
			color: #000;
			border: 1px solid #000;
			line-height: 50rpx;
			text-align: center;
		}

		.info-wchart {
			display: flex;
			align-items: center;
			justify-content: space-around;
			.wchart-text {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #333;

				image {
					margin-right: 12rpx;
				}
			}
		}

		.info-tabs {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 108rpx;
			background: #f8f8f8;
			margin-top: 40rpx;
		}

		.activeinfo {
			font-size: 28rpx;
			line-height: 48rpx;
			margin: 0 60rpx;
		}

		.texted {
			font-size: 32rpx;
			font-weight: bold;
			border-bottom: 4rpx solid #000;
		}

		.tab-info-content {
			background: #fff;

			.infocontent_List {
				margin: 0 30rpx;
			}

			.commFilter {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;
			}

			.filterTxt {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
			}

			.leftFilter {
				width: 12rpx;
				height: 22rpx;
			}

			.info-photolist {
				display: flex;
				margin-top: 24rpx;
			}

			.photo-heng {
				display: flex;
				align-items: center;

				image {
					width: 219rpx;
					height: 316rpx;
					border-radius: 12rpx;
					margin-right: 16rpx;
				}
			}

			.phont-shu {
				position: relative;

				.shuimg {
					width: 219rpx;
					height: 150rpx;
					border-radius: 12rpx;
				}

				.shuimg:nth-child(2) {
					margin-top: 16rpx;
				}

				.shu-zhe {
					width: 219rpx;
					height: 150rpx;
					position: absolute;
					border-radius: 12rpx;
					bottom: 2rpx;
					right: 4rpx;
					background: rgba(0, 0, 0, 0.5);
					text-align: center;
					font-size: 30rpx;
					color: #fff;
					line-height: 150rpx;
				}
			}

			.info-bd {
				width: 100%;
				height: 20rpx;
				background: #f8f8f8;
				margin: 30rpx 0;
			}

			.video-infosmall {
				position: relative;

				.vid-aimg {
					width: 219rpx;
					height: 316rpx;
					border-radius: 12rpx;
					margin-right: 16rpx;
				}
			}

			.vid-zhe {
				position: absolute;
				top: 0;
				left: 0;
				width: 219rpx;
				height: 316rpx;
				border-radius: 12rpx;
				margin-right: 16rpx;
				background: rgba(0, 0, 0, 0.5);
			}

			.vid-play {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				top: 136rpx;
				left: 87rpx;
			}

			.video-infobig {
				position: relative;

				.vid-aimgbig {
					width: 438rpx;
					height: 316rpx;
					border-radius: 12rpx;
				}

				.vid-zhebig {
					position: absolute;
					top: 0;
					left: 0;
					width: 438rpx;
					height: 316rpx;
					border-radius: 12rpx;
					background: rgba(0, 0, 0, 0.5);
				}

				.vid-playbig {
					width: 44rpx;
					height: 44rpx;
					position: absolute;
					top: 136rpx;
					left: 197rpx;
				}
			}

			.info-space {
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				margin-bottom: 30rpx;

				.space-ava {
					width: 160rpx;
					height: 160rpx;
					border-radius: 12rpx;
				}

				.space-name {
					margin-left: 24rpx;
				}

				.spacename-name {
					font-size: 40rpx;
					color: #000;
					font-weight: bold;
				}

				.spacename-tai {
					font-size: 28rpx;
					color: #666;
					margin-top: 24rpx;
				}

				.space-join {
					width: 144rpx;
					height: 48rpx;
					background: #000;
					color: #fff;
					line-height: 48rpx;
					text-align: center;
					border-radius: 24rpx;
					font-size: 24rpx;
					margin-left: 160rpx;
				}
			}

			.info-label {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 30rpx;

				.infolabel-name {
					text-align: center;
					font-size: 24rpx;
					border: 1px solid #000;
					border-radius: 8rpx;
					padding: 18rpx 24rpx;
					margin-right: 24rpx;
					margin-top: 24rpx;
				}
			}

			.info-aboutme {
				margin-top: 24rpx;
				margin-bottom: 30rpx;

				.aboutme-txt {
					font-size: 26rpx;
					color: #666;
					width: 690rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.info-place {
				margin-top: 24rpx;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
			}

			.info-xing {
				margin-top: 24rpx;
				margin-bottom: 30rpx;

				.xingimg {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}
			}

			.info-wei {
				margin-top: 24rpx;
				margin-bottom: 30rpx;
				font-size: 26rpx;
				color: #666;
			}

			.info-btn {
				width: 100%;
				background: #f8f8f8;
				display: flex;
				align-items: center;
				padding: 64rpx 0;
			}

			.join-btn {
				width: 333rpx;
				height: 90rpx;
				line-height: 90rpx;
				color: #FEC92F;
				text-align: center;
				font-size: 32rpx;
				background: #000;
				border-radius: 12rpx;
				margin-left: 30rpx;
			}

			.luwi-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 333rpx;
				height: 90rpx;
				color: #fff;
				font-size: 32rpx;
				background: #FF4989;
				border-radius: 12rpx;
				margin-left: 30rpx;

				image {
					width: 30rpx;
					height: 35rpx;
					margin-right: 12rpx;
				}
			}

			.infodong_list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 30rpx;

			}

			.normaltxt {
				margin: 0 auto;
				text-align: center;
				font-size: 28rpx;
				width: 100%;
				padding-top: 64rpx;
				background: #f8f8f8;
				color: rgba(153, 153, 153, 1);
				padding-bottom:64rpx;
			}

			.info_model {
				position: relative;
				height: 420rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}

			.info_model:nth-of-type(odd) {
				margin-left: 30rpx;
			}

			.model_img {
				width: 335rpx;
				height: 420rpx;
				border-radius: 16rpx;
			}

			.playimg {
				position: absolute;
				width: 36rpx;
				height: 36rpx;
				top: 12rpx;
				right: 12rpx;
			}

			.dongname {
				width: 160rpx;
				font-size: 32rpx;
				color: #fff;
				position: absolute;
				bottom: 56rpx;
				left: 12rpx;
			}

			.dongtime {
				color: #fff;
				position: absolute;
				font-size: 24rpx;
				bottom: 12rpx;
				left: 12rpx;
			}

			.dongzannum {
				color: #fff;
				font-size: 24rpx;
				position: absolute;
				display: flex;
				align-items: center;
				right: 12rpx;
				bottom: 12rpx;

				image {
					width: 24rpx;
					height: 22rpx;
					margin-right: 12rpx;
				}
			}


		}


	}
</style>